<template>
  <view class="content">
    <image class="img-2" src="/static/login/2.png" mode=""></image>
    <image class="img-3" src="/static/login/3.png" mode=""></image>
    <view class="title">欢迎回来</view>
    <view class="form">
      <view class="form-item">
        <image class="form-image" src="/static/login/shouji.png"></image>
        <view class="form-line"></view>
        <input class="form-input" v-model="phone" type="number" placeholder="请输入手机号" maxlength="11" />
      </view>
      <view class="form-item">
        <image class="form-image" src="/static/login/yangzheng.png"></image>
        <view class="form-line"></view>
        <input class="form-input" v-model="yzm" type="number" maxlength="6" placeholder="请输入验证码" />
        <view v-if="isSend" class="form-send" @click="getCode">发送短信</view>
        <view v-else class="form-send form-send-again">{{ second }}</view>
      </view>
      <button class="form-button" @click="login">登 录</button>
    </view>
  </view>
</template>

<script>
  import { getToken } from "@/common/api"

  export default {
    data() {
      return {
        phone: "",
        yzm: "",
        isSend: true,
        second: "",
        timer: null
      }
    },
    methods: {
      async phoneCheck() {
        let result = true
        if (!this.phone) { result = false }
        if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(this.phone)) {
          result = false
        }
        if (!result) {
          uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
        }
        return result
      },
      async yzmCheck() {
        let result = true
        if (!this.yzm) {
          uni.showToast({ title: '请输入验证码', icon: 'none' })
          result = false
        }
        return result
      },
      async getCode() {
        let phoneResult = await this.phoneCheck()
        if (!phoneResult) { return false }
        const second_count = 10
        this.second = second_count
        this.isSend = false
        this.timer = setInterval(() => {
          if (this.second == 0) {
            this.isSend = true;
            clearInterval(this.timer);
            this.timer = null;
          } else {
            this.second--;
          }
        }, 1000)
      },
      // async login() {
      login() {
        // let phoneResult = await this.phoneCheck()
        // let yzmResult = await this.yzmCheck()
        // if (!phoneResult || !yzmResult) { return false }

        getToken('104@qq.com', 456789).then(res => {
          uni.setStorageSync('token', res.data.access_token)
          uni.setStorageSync('refresh_token', res.data.refresh_token)
          uni.setStorageSync('hasLogin', true)
          uni.switchTab({
            url: '/pages/index/index'
          })
        })

      }
    }
  }
</script>

<style scoped>
  @import url("login.css");
</style>
